<template>
  <!-- 公共具体歌单路由组件 -->
  <div class="detail-playlist">
    <!-- 顶部红色导航 -->
    <red-top-nav></red-top-nav>
    <div class="detail-wrap">
      <div class="left-wrap">
        <!-- 头部 -->
        <div class="l-title">
          <div class="img">
            <img src="./img/2.jpg" alt="排行榜图片" />
          </div>
          <div class="info">
            <div class="info-top">
              <i class="icon"></i>
              <span>一些听了会开心快乐的歌</span>
            </div>
            <div class="info-md">
              <img src="./img/2.jpg" />
              <a src="javascript:;">啦啦啦就哦</a>
              <span>2019-10-21 创建</span>
            </div>
            <div class="info-btn">
              <div class="it-1">
                <a href="javascript:;" title="播放" class="a-1">
                  <span>播放</span>
                </a>
                <a href="javascript:;" title="添加到播放列表" class="a-2"></a>
              </div>
              <div class="it-2">
                <a href="javascript:;">
                  <span>(1234)</span>
                </a>
              </div>
              <div class="it-3">
                <a href="javascript:;">
                  <span>(456)</span>
                </a>
              </div>
              <div class="it-4">
                <a href="javascript:;">
                  <span>下载</span>
                </a>
              </div>
              <div class="it-5">
                <a href="javascript:;">
                  <span>(789)</span>
                </a>
              </div>
            </div>
            <!-- 标签 -->
            <ul class="tag">
              标签：
              <li>华语</li>
              <li>流行</li>
            </ul>
            <!-- 介绍 -->
            <div class="intro">
              介绍：
              其实我不太明白听到这些歌我有什么样的心情，但我相信当你发现它的时候，我们之间一定存在着一样的感受。
              那么 好好聆听吧，恭喜你发现宝藏。 顺祝你今天过得愉快。
            </div>
          </div>
        </div>
        <div class="title">
          <div class="left">
            <span class="sp-1">歌曲列表</span>
            <span class="sp-2">101首歌</span>
          </div>
          <div class="right">
            <span>播放：<i>127</i>次</span>
          </div>
        </div>
        <!-- 列表 -->
        <div class="list">
          <div class="list-table">
            <div class="head">
              <div class="h-1"></div>
              <div class="h-2">标题</div>
              <div class="h-3">时长</div>
              <div class="h-4">歌手</div>
              <div class="h-5">专辑</div>
            </div>
            <ul class="body">
              <li class="behind" v-for="(i, index) in 10" :key="index">
                <div class="h-1 li-1">
                  <span>{{ index + 1 }}</span>
                  <span class="icon"></span>
                </div>
                <div class="h-2 li-2">
                  <span title="删了吧">删了吧</span>
                  <span> - (要不你还是把我删了吧)</span>
                </div>
                <div class="h-3 li-3">
                  <!-- <span>03:44</span> -->
                  <div class="icon-team">
                    <i class="icon-t-1" title="添加到播放列表"></i>
                    <i class="icon-t-2" title="收藏"></i>
                    <i class="icon-t-3" title="分享"></i>
                    <i class="icon-t-4" title="下载"></i>
                  </div>
                </div>
                <div class="h-4 li-4">
                  <span title="马思唯">于佰万</span>
                </div>
                <div class="h-5 li-5">
                  <span title="删了吧">删了吧</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 评论区组件 -->
        <comment-write></comment-write>
        <!-- 分页器 -->
        <pager :currentPage="currentPage" pageSize="20" pageGroup="7" total="999" @getCurrentPage="getCurrentPage"></pager>
      </div>
      <div class="right-wrap">
        <div class="like">
          <div class="like-title">喜欢这个歌单的人</div>
          <ul class="like-content">
            <li v-for="i,index in 8" :key="index">
              <img src="./img/1.jpg">
            </li>
          </ul>
        </div>
        <div class="hot">
          <div class="hot-title">热门歌单</div>
          <ul class="hot-content">
            <li v-for="i,index in 5" :key="index">
              <div class="img">
                <img src="./img/1.jpg">
              </div>
              <div class="info">
                <p title="希望你最后的成绩能点亮整个夏天" class="text-ellipsis">希望你最后的成绩能点亮整个夏天</p>
                <p>
                  <span>by </span>
                  <span title="空气很颓废">空气很颓废</span>
                  <img src="./img/3.png">
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 评论区组件
import commentWrite from "@/components/comment-write";
// 红色顶部导航
import redTopNav from '@/components/red-top-nav'
export default {
  name: "detail-playlist",
  components: { commentWrite,redTopNav },
  data(){
    return{
      currentPage:1
    }
  },
  methods:{
    getCurrentPage(page){
      this.currentPage = page
    }
  }
};
</script>

<style lang="scss" scoped>
.detail-playlist {
  width: 100%;
  background-color: #f5f5f5;
  font-size: 12px;
  .detail-wrap {
    width: 982px;
    border-left: 1px solid #d3d3d3;
    border-right: 1px solid #d3d3d3;
    background-color: #fff;
    margin: 0 auto;
    display: flex;
    .left-wrap {
      width: 710px;
      border-right: 1px solid #f0f0f0;
      padding: 35px;
      box-sizing: border-box;
      .l-title {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        .img {
          padding: 3px;
          border: 1px solid #ccc;
          width: 208px;
          height: 208px;
          img {
            width: 208px;
            height: 208px;
          }
        }
        .info {
          margin-left: 30px;
          width: 450px;
          .info-top {
            color: #333;
            font-size: 20px;
            line-height: 30px;
            .icon {
              display: inline-block;
              vertical-align: middle;
              width: 54px;
              height: 24px;
              margin-right: 10px;
              background: url("@/assets/icon.png") no-repeat;
              background-position: 0 -243px;
            }
          }
          .info-md {
            font-size: 12px;
            height: 35px;
            margin: 10px 0 20px 0;
            img {
              width: 35px;
              height: 35px;
              vertical-align: middle;
              cursor: pointer;
            }
            a {
              margin: 0 15px 0 10px;
              cursor: pointer;
              color: #d20000;
              &:hover {
                text-decoration: underline;
              }
            }
            span {
              color: #999;
            }
          }
          .info-btn {
            display: flex;
            justify-content: space-between;
            a {
              display: inline-block;
              vertical-align: middle;
              line-height: 31px;
              height: 31px;
              font-size: 12px;
            }
            .it-1 {
              .a-1 {
                width: 66px;
                height: 31px;
                background: url("@/assets/button2.png") no-repeat;
                background-position: 0 -632px;
                &:hover {
                  background-position: 0 -718px;
                }
                span {
                  color: #fff;
                  font-size: 12px;
                  margin-left: 35px;
                }
              }
              .a-2 {
                width: 31px;
                height: 31px;
                vertical-align: middle;
                background: url("@/assets/button2.png") no-repeat;
                background-position: 0 -1587px;
                &:hover {
                  background-position: -40px -1587px;
                }
              }
            }
            .it-2,
            .it-3,
            .it-4,
            .it-5 {
              margin-left: 5px;
              a {
                background: url("@/assets/button2.png") no-repeat;
                padding-right: 4px;
              }
            }
            .it-2 {
              a {
                background-position: right -1191px;
                cursor: default;
                span {
                  color: #ccc;
                  display: inline-block;
                  padding-left: 28px;
                  background: url("@/assets/button2.png") no-repeat;
                  background-position: 0 -1148px;
                }
              }
            }
            .it-3 {
              a {
                background-position: right -1019px;
                &:hover {
                  background-position: right -1105px;
                  span {
                    background-position: 0 -1267px;
                  }
                }
                span {
                  color: #333;
                  display: inline-block;
                  padding-left: 28px;
                  background: url("@/assets/button2.png") no-repeat;
                  background-position: 0 -1224px;
                }
              }
            }
            .it-4 {
              a {
                background-position: right -1019px;
                &:hover {
                  background-position: right -1105px;
                  span {
                    background-position: 0 -2804px;
                  }
                }
                span {
                  color: #333;
                  display: inline-block;
                  padding-left: 28px;
                  background: url("@/assets/button2.png") no-repeat;
                  background-position: 0 -2760px;
                }
              }
            }
            .it-5 {
              a {
                background-position: right -1019px;
                &:hover {
                  background-position: right -1105px;
                  span {
                    background-position: 0 -1507px;
                  }
                }
                span {
                  color: #333;
                  display: inline-block;
                  padding-left: 28px;
                  background: url("@/assets/button2.png") no-repeat;
                  background-position: 0 -1464px;
                }
              }
            }
          }
          .tag {
            color: #666;
            margin-top: 20px;
            li {
              color: #777;
              width: 50px;
              height: 20px;
              display: inline-block;
              text-align: center;
              line-height: 20px;
              border: 1px solid #dbdbdb;
              border-radius: 10px;
              background-color: #f2f2f2;
              cursor: pointer;
              margin-right: 10px;
              &:hover {
                background-color: #fdfdfd;
              }
            }
          }
          .intro{
            color: #666;
            margin-top: 20px;
            line-height: 18px;
          }
        }
      }
      .title {
        margin-top: 15px;
        width: 641px;
        border-bottom: 2px solid #c20c0c;
        line-height: 35px;
        height: 35px;
        display: flex;
        justify-content: space-between;
        .left {
          .sp-1 {
            font-size: 20px;
            color: #333;
          }
          .sp-2 {
            font-size: 12px;
            color: #666;
            margin-left: 20px;
          }
        }
        .right {
          margin-right: 20px;
          span {
            font-size: 12px;
            color: #666;
            i {
              color: #c20c0c;
              font-weight: bold;
            }
          }
        }
      }
      .list {
        width: 100%;
        .list-table {
          width: 100%;
          font-size: 12px;
          .h-1 {
            width: 80px;
          }
          .h-2 {
            width: 250px;
            border-left: 1px solid #d9d9d9;
            padding: 0 10px;
            box-sizing: border-box;
          }
          .h-3 {
            width: 100px;
            border-left: 1px solid #d9d9d9;
            padding: 0 10px;
            box-sizing: border-box;
          }
          .h-4 {
            width: 100px;
            border-left: 1px solid #d9d9d9;
            padding: 0 10px;
            box-sizing: border-box;
          }
          .h-5 {
            width: 108px;
            border-left: 1px solid #d9d9d9;
            padding: 0 10px;
            box-sizing: border-box;
          }
          .head {
            width: 100%;
            height: 35px;
            line-height: 35px;
            border-left: 1px solid #d9d9d9;
            border-right: 1px solid #d9d9d9;
            background: url("@/assets/table.png") no-repeat;
            background-position: 0 0;
            background-repeat: repeat-x;
            // overflow: hidden;
            display: flex;
          }
          .body {
            width: 100%;
            border: 1px solid #d9d9d9;
            border-top: none;
            li:nth-child(odd) {
              background-color: #f7f7f7;
            }
            li:nth-child(even) {
              background-color: #fff;
            }
            .behind {
              display: flex;
              // height: 70px;
              height: 30px;
              background-color: #f7f7f7;
              & > div {
                border: none;
                padding: 6px 10px;
                box-sizing: border-box;
              }
              .li-1 {
                span {
                  display: inline-block;
                  width: 24px;
                  text-align: center;
                  vertical-align: middle;
                  color: #999;
                }
                .icon {
                  display: inline-block;
                  width: 17px;
                  height: 17px;
                  background: url("@/assets/table.png") no-repeat;
                  background-position: 0 -103px;
                  vertical-align: middle;
                  margin-left: 10px;
                  cursor: pointer;
                  &:hover {
                    background-position: 0 -128px;
                  }
                }
              }
              .li-2 {
                span:nth-child(1) {
                  line-height: 18px;
                  cursor: pointer;
                  color: #333;
                  &:hover {
                    text-decoration: underline;
                  }
                }
                span:nth-child(2) {
                  line-height: 18px;
                  color: #999;
                }
              }
              .li-3 {
                display: flex;
                color: #333;
                span {
                  line-height: 18px;
                }
                .icon-team {
                  .icon-t-1 {
                    width: 14px;
                    height: 14px;
                    display: inline-block;
                    cursor: pointer;
                  }
                  .icon-t-2,
                  .icon-t-3,
                  .icon-t-4 {
                    width: 18px;
                    height: 16px;
                    display: inline-block;
                    cursor: pointer;
                    margin-left: 3px;
                  }
                  .icon-t-1 {
                    background: url("@/assets/icon.png") no-repeat;
                    background-position: 0 -700px;
                    &:hover {
                      background-position: -22px -700px;
                    }
                  }
                  .icon-t-2 {
                    background: url("@/assets/table.png") no-repeat;
                    background-position: 0 -172px;
                    &:hover {
                      background-position: -20px -172px;
                    }
                  }
                  .icon-t-3 {
                    background: url("@/assets/table.png") no-repeat;
                    background-position: 0 -193px;
                    &:hover {
                      background-position: -20px -193px;
                    }
                  }
                  .icon-t-4 {
                    background: url("@/assets/table.png") no-repeat;
                    background-position: -81px -172px;
                    &:hover {
                      background-position: -104px -172px;
                    }
                  }
                }
              }
              .li-4 {
                span {
                  line-height: 18px;
                  color: #333;
                  cursor: pointer;
                  &:hover {
                    text-decoration: underline;
                  }
                }
              }
              .li-5 {
                span {
                  line-height: 18px;
                  color: #333;
                  cursor: pointer;
                  &:hover {
                    text-decoration: underline;
                  }
                }
              }
            }
          }
        }
      }
    }
    .right-wrap {
      width: 270px;
      padding: 35px;
      color: #333;
      .like{
        font-weight: bold;
        width: 100%;
        .like-title{
          height: 23px;
          line-height: 23px;
          border-bottom: 1px solid #ccc;
          margin-bottom: 20px;
        }
        .like-content{
          width: 100%;
          display: grid;
          grid-template-rows: repeat(2,1fr);
          grid-template-columns: repeat(4,1fr);
          gap: 13px;
          li{
            width: 40px;
            height: 40px;
            cursor: pointer;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .hot{
        width: 100%;
        margin-top: 20px;
        .hot-title{
          height: 23px;
          line-height: 23px;
          border-bottom: 1px solid #ccc;
          margin-bottom: 20px;
          font-weight: bold;
        }
        .hot-content{
          width: 100%;
          li{
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            .img{
              width: 50px;
              height: 50px;
              cursor: pointer;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .info{
              width: 140px;
              p:nth-child(1){
                font-size: 14px;
                line-height: 20px;
                margin-top: 3px;
                cursor: pointer;
                &:hover{
                  text-decoration: underline;
                }
              }
              p:nth-child(2){
                margin-top: 5px;
                line-height: 20px;
                span:nth-child(1){
                  color: #999;
                }
                span:nth-child(2){
                  color: #666;
                  cursor: pointer;
                  &:hover{
                    text-decoration: underline;
                  }
                }
                img{
                  width: 13px;
                  height: 13px;
                  vertical-align: middle;
                  margin-left: 2px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>

<style scoped>
/* 修改评论区组件的样式 */
::v-deep .submit-word {
  padding: 0 !important;
}
</style>